<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>流量统计-活跃用户分析</title>
		<meta name="description" content="overview &amp; stats" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.2.0/css/font-awesome.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery-ui.custom.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery.gritter.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/fonts/fonts.googleapis.com.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrapValidator.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
		<link rel="stylesheet" href="${rc.contextPath}/stylesheets/daterangepicker.css">
		<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/jquery.2.1.1.min.js"></script>
		<link rel="stylesheet" href="${rc.contextPath}/stylesheets/loading.css" />
		<link rel="stylesheet" href="${rc.contextPath}/stylesheets/tips.css"/>
	<style>
	th,td{text-align: center;}
	</style>
	</head>
	<body class="no-skin" style="background-color: #FFF;">
		<div class="page-content">
			<div class="row">
				<div class="col-xs-12">
					<div class="widget-box">
						<div class="widget-header widget-header-small">
							<h5 class="widget-title lighter">筛选条件</h5>
						</div>
						<div class="widget-body" style="background-color: #EFF3F8;">
							<div class="widget-main">
								<form class="form-inline" id="searchForm" method="post" action="">
									<div class="row widget-main">
										<div class="form-group">
											<label class="control-label no-padding-right">选择时段</label>
											<input type="text" id="config-demo" name="chooseTimeVO" class="form-control time" value="">
											<button id="app_search" type="button"  onclick="replaceDate(this,'1');" class="btn btn-white btn-sm">
												<span class="ace-icon icon-on-right bigger-110"></span>
												昨日
											</button>
											<button id="app_search" type="button"  onclick="replaceDate(this,'7');" class="btn btn-white btn-sm">
												<span class="ace-icon icon-on-right bigger-110"></span>
												过去7天
											</button>
											<button id="app_search" type="button"  onclick="replaceDate(this,'31');" class="btn btn-white btn-sm">
												<span class="ace-icon icon-on-right bigger-110"></span>
												过去31天
											</button>
										</div>
										<div class="form-group">
											<button id="search_but" type="button" class="btn btn-pink btn-sm">
												<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
												Search
											</button>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
				<div class="col-xs-12">
					<div class="tabbable">
						<div class="row" style="padding-top: 5px;">
							<!-- DAU -->
							<div class="col-sm-6"   style="padding-left: 0px!important;">
								<div class="widget-box">
									<div class="widget-header widget-header-flat">
										<h4 class="widget-title lighter">
											<i class="ace-icon fa fa-signal blue"></i><span class="title_dau"></span>
										</h4>
										<label class="help_img">
											<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
											<span class='tips'>某一时间段内各平台逐日<span class="content_name"></span>量<s></s></span>
										</label>
									</div>
									<div class="widget-body">
										<div id="dauLineChart" style="height: 400px;"></div>
									</div>
								</div>
							</div>
							<!-- MAU -->
							<div class="col-sm-6"   style="padding-left: 0px!important;">
								<div class="widget-box">
									<div class="widget-header widget-header-flat">
										<h4 class="widget-title lighter">
											<i class="ace-icon fa fa-signal blue"></i><span class="title_mau"></span>
										</h4>
										<label class="help_img">
											<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
											<span class='tips'>某一时间段内各平台逐日<span class="content_name"></span>量<s></s></span>
										</label>
									</div>
									<div class="widget-body">
										<div id="mauLineChart" style="height: 400px;"></div>
									</div>
								</div>
							</div>
							
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<script src="${rc.contextPath}/assets/js/moment.min.js"></script>
		<script src="${rc.contextPath}/assets/js/bootstrap-datetimepicker.min.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/bootstrap.min.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/moment.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/daterangepicker.js"></script>
		<script src="${rc.contextPath}/assets/js/chosen.jquery.js"></script>
		<script src="${rc.contextPath}/assets/js/user/base.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/dateRange.js"></script>
		<script src="${rc.contextPath}/assets/js/d3.v3.min.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/loading.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/g2.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/slider.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/g2-modal.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/FileSaver.js"></script>		
		<script type="text/javascript" src="${rc.contextPath}/javascripts/export-csv.js"></script>
		<script type="text/javascript">
		jQuery(function($) {
			$("#search_but").click();
		});
		
		$("#search_but").on("click",function(){
		    getChartData();
		});

		function getChartData(){
			var chooseTime = $("#config-demo").val();
			$.ajax({
				url : '${rc.contextPath}/activeUser/activeUserChartData',
				type : "POST",
				data : {
					chooseTime:chooseTime
				},
			    beforeSend: function(){
	 			   $("#search_but").attr("disabled",true);
	 			    openPartialLayer($("#dauLineChart"));
	 			    openPartialLayer($("#mauLineChart"));
		    	 },
			    complete: function(){
			    	$("#search_but").attr("disabled",false);
			    	removeLoading($("#dauLineChart"));
			    	removeLoading($("#mauLineChart"));
			    },
				success:function(data) {
					$(".title_dau").html("日活跃用户（DAU）平台趋势图");
					$(".title_mau").html("月活跃用户（MAU）平台趋势图");
					var defs = {
						'platform': {
							alias : '设备平台'
						},
						'amount': {
							alias :'用户量'
						},
						'time':{
							type: 'time',
							tickCount: 8
						}
					};
					var exportFormDau = {
						'headers':['设备平台','time','用户量'],
						'cols':['platform','time','dau'],
						'sortCols':['platform','time']
					};
					var exportFormMau = {
						'headers':['设备平台','time','用户量'],
						'cols':['platform','time','mau'],
						'sortCols':['platform','time']
					};
					lineChartModal(data.dauArrData,'dauLineChart','time','dau','platform','','浏览量(/次)',400,defs,exportFormDau);
					lineChartModal(data.mauArrData,'mauLineChart','time','mau','platform','','浏览量(/次)',400,defs,exportFormMau);
				},
				error:function(data) {
					//showMsg("查询数据有误");
				}
			});
		}
		
	</script>
	</body>
</html>